<template>
  <!-- swiper 组件，用于创建滑动视图 -->
  <swiper class="swiper-container" :current="activeIndex" @change="changeActiveIndex">
      <!-- swiper-item 组件，利用 v-for 遍历 labelList，并为每个 item 赋予唯一的 key -->
      <swiper-item v-for="(item, index) in labelList" :key="item._id">
          
             <view class="swiper-item uni-bg-red">
                 <ListItem 
				 
				 :loadData='loadData[index]'
				 @loadMore=loadMoreData :articleList='articleData[index]' />
             </view> <!-- 显示每个 item 的名称 -->
        
      </swiper-item>
	  
  </swiper>
</template>

<script>
	import {get_Article_list} from '../../Ajax/Api/interface/home.js' 
export default {
    name: "ArticleList", // 定义组件的名称
    props: {
        labelList: Array, // 接收父组件传递的 labelList，类型为数组
        activeIndex: Number // 接收父组件传递的 activeIndex，类型为数字
    },
	watch:{
		labelList(newValue,oldValue){//可能我们初始化组件获取时候，后端还没有传过来
		//组件数据还没有传过来
		//解决方法，用监听
			this.getArticleList(this.activeIndex)
		}
	},
    data() {
        return {
            // data 函数返回的数据结构
			articleData:{},
			loadData:{},
			page:1,
			pageSize:6
        };
    },
	
    methods: {
		loadMoreData  (){
			if(this.loadData[this.activeIndex].total===
			this.loadData[this.activeIndex].length
			){
				this.loadData[this.activeIndex]={
					...this.loadData[this.activeIndex],
					...{loading:'noMore'}
				}
				this.$forceUpdate()
				return
			}

			this.loadData[this.activeIndex].page++
			this. getArticleList(this.activeIndex)
			console.log('到底了');
			
		},
        changeActiveIndex(e) {
            // 当 swiper 的活动索引改变时调用的方法
            const index = e.detail.current; // 获取当前活动的索引
			
				
			if(!this.articleData[index]||!this.articleData[inde].length){
			this.getArticleList(index)
			}
			
            this.$emit('changeActiveIndex', index); // 触发事件，向父组件传递新的活动索引
        },
		async getArticleList(index){
			if(!this.loadData[index]){
				this.loadData[index]={
					page:1,
					loading:'loading',
					total:0
				}
			}
			
			const {articleList,total} =await get_Article_list( {
				classify:this.labelList[index].name
			,
			page: this.loadData[index].page,
			pageSize:this.pageSize,
			
			})
			console.log(articleList,total);
			console.log('await get_Article_list()');
			let oldList=this.articleData[index]||[]
			//追放每一次的数据结果 
			oldList.push(...articleList)
			
			this.$set(this.articleData,index,oldList);
			this.loadData[index].total=total
			// this.articleaData[index]=res
		}
    }
}
</script>

<style lang="scss">
.swiper-container {
    height: 100%; // 设置容器高度为 100%
	.swiper-item{
		height: 100%;
		overflow: hidden;
	}
}
</style>
